/*
 * @Author: Await
 * @Date: 2025-05-08 16:22:00
 * @LastEditors: Await
 * @LastEditTime: 2025-05-08 16:22:00
 * @Description: 仪表盘图组件
 */
import React, { useRef } from 'react';
import { ChartConfig, DataItem, DataConfig, ThemeOption } from '../../../types/index';
import ChartBase, { ChartBaseRef } from '../ChartBase';
import { ChartType } from '../../../types/chartTypes';

interface GaugeChartProps {
    config: ChartConfig;
    data: DataItem[];
    dataConfig?: DataConfig;
    theme?: ThemeOption;
    height?: string | number;
    width?: string | number;
}

/**
 * 仪表盘图组件 - 用于展示单个指标值的进度
 */
const GaugeChart: React.FC<GaugeChartProps> = ({
    config,
    data,
    dataConfig,
    theme,
    height = '400px',
    width = '100%'
}) => {
    const chartRef = useRef<ChartBaseRef>(null);

    // 确保配置中包含仪表盘所需的设置
    if (!config.type || config.type !== ChartType.GAUGE) {
        config.type = ChartType.GAUGE;
    }

    // 特殊处理仪表盘数据格式
    const processedData = React.useMemo(() => {
        // 仪表盘通常只需要一个数值
        if (!data || data.length === 0) {
            console.warn('仪表盘数据为空');
            // 返回默认值
            return [{ value: 50, name: '指标值' }];
        }
        
        // 如果数据是简单数组，转换为仪表盘所需格式
        if (typeof data[0] === 'number') {
            return [{ value: data[0], name: '指标值' }];
        }
        
        // 如果数据已经有value字段，直接使用
        if (data[0].value !== undefined) {
            // 确保有name字段
            return data.map(item => ({
                ...item,
                name: item.name || '指标值'
            }));
        }
        
        // 尝试获取第一个非id/name的字段作为值
        const firstKey = Object.keys(data[0]).find(key => 
            key !== 'id' && key !== 'name' && !isNaN(Number(data[0][key]))
        );
        
        if (firstKey) {
            return data.map(item => ({
                value: Number(item[firstKey]),
                name: item.name || firstKey
            }));
        }
        
        console.warn('无法确定仪表盘的数据值字段');
        return [{ value: 50, name: '指标值' }];
    }, [data]);

    return (
        <div style={{ height, width }}>
            <ChartBase
                ref={chartRef}
                option={config}
                data={processedData}
                dataConfig={dataConfig}
                theme={theme}
                renderer="canvas"
            />
        </div>
    );
};

export default GaugeChart;